<template>
	<view>
		<navNav :navobj="navobj" @changes="changes"></navNav>
		<view class="tabList">
			<view @click="choose(index)" :class="actIndex === index?'actClass':''" class="item"
				v-for="(item,index) in tabList" :key="index">{{item}}</view>
		</view>
		<scroll-view style="background-color:#f8f8f8; height: 100vh;width: 750rpx;margin: 0 auto;" scroll-y="true" refresher-enabled="true"
		  :refresher-triggered="triggered" refresher-background="#fff" 
			@refresherrefresh="pulldown" @scrolltolower="scrolltolower" >
		

			<view class="orderList" v-if="actIndex != 2">
				<view class="item" v-for="(item,index) in orderList" :key="index">
					<view class="timeBox">
						<view v-if="item.isStatusChangedUnRead?.key!=0" style="text-align: center;line-height: 40rpx; border-radius: 100%;width: 30rpx;height: 30rpx;  background-color: red;"></view>
						<view class="time">下单时间：{{item.request.createTime}}</view>
						
						<view class="statu">{{actIndex === 0?item.status.name : item.refund.status.name}}</view>
					  
					</view>
					<view class="content">
						<view class="icon">始</view>
						<view class="where">地址：{{item.request.userAddress.city.name}}
							{{item.request.userAddress.city.mergerName}}</view>
					</view>
					<!-- 正在工中 -->
					<view class="content" v-if="item.request.serveStatus?.key>2&&item.request.serveStatus?.key <5">
						<view style="width: 50rpx;height: 50rpx;color: white;font-weight: bold;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 14px;background-color: #FF8F1F;">工</view>
						<view class="where" style="margin-left: 20rpx;">{{item.orderAddition.status?.key==1?'勘察方案已签订' :'勘察方案未签订' }}</view>
					</view>
					<!-- 办公完成 -->
					<view class="content" v-if="item.request.serveStatus?.key ==5">
						<view style="width: 50rpx;height: 50rpx;color: white;font-weight: bold;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 14px;background-color: #FF8F1F;">结</view>
						<view class="where">{{item.request.inspectorName}} {{item.request.revTime}}</view>
					</view>
					<view class="priceBox">
						<view class="timeOut">
							<image class="img" src="../../static/img/home/naozhong.png"></image>
							<view v-if="item.costTime!=null" class="text">总时长 {{item.costTime}}</view>
							<view v-else class="text">
								<view v-if="item.status.key==0">请先支付下单</view>
								<view v-else-if="item.status.key==1"> <text>等待平台接单</text> </view>
								<view v-else-if="item.status.key==3">等待平台派单</view>
								<view v-else-if="item.status.key==4">
									<view v-if="item.request.serveStatus!=null">{{item.request.serveStatus.name}}</view>
									<view v-else>等待师傅上门确认时间</view>
								</view>
								<view v-else-if="item.status.key==41">确定施工人员入场</view>
								<view v-else>{{item.status.name}}</view>
							</view>
						</view>
						<view class="price"><span class="icon">￥</span>{{item.orderPrice}}</view>
					</view>
					<view class="buttonBox">
						<view class="button" v-if="item.status.key != 0" @click="toDetail" :data-index="index" :data-id="item.id">查看详情</view>
						<view class="button warnButton" v-if="item.request.serveStatus!=null" @click="toRefund(item.id,item.orderNo)">申请售后</view>
						<view class="button warnButton" v-if="item.status.key == 0" @click="close" :data-index="index" :data-orderno="item.orderNo">关闭订单</view>
						<view class="button warnButton" v-if="item.status.key == 0" @click="pay" :data-payment="item.payment" :data-lookid="item.id" >支付订单</view>
					  <view @click="cancalOrderfun" :data-index="index" :data-orderno="item.orderNo" class="button warnButton" v-if="item.status.key==1"  >取消订单</view>
						<view @click="confirm" :data-index="index" :data-orderno="item.orderNo" class="button warnButton" v-if="item.request.serveStatus?.key==4"  >确认订单</view>
					</view>
				</view>
			</view>
			<view class="ticketList" v-else>
				<view class="item" v-for="(item,index) in ticketList" :key="index">
					<view class="headerBox">
						<view class="status">{{item.status.name}}</view>
						<view class="title">{{item.titleName}}</view>
					</view>
					<view class="line"></view>
					<view class="body">
						<view class="labelBox">
							<view class="dot" style="background-color: gray;"></view>
							<view class="value "  style="color: darkgrey;">订单编号:{{item.orderNo}}</view>
						</view>
						<view class="labelBox">
							<view class="dot"></view>
							<view class="value">申请理由:{{item.content}}</view>
						</view>
						<view class="labelBox">
							<view class="dot"></view>
							<view class="value">联系手机:{{item.phone?item.phone:'暂无'}}</view>
						</view>
						<view class="line"></view>
						<view class="timeBox">
							{{item.createTime}}
						</view>
						<view></view>
						
					</view>
				</view>
			</view>
		  <view style="height: 400rpx;"></view>
	  </scroll-view>
		
	</view>
</template>

<script setup>
	import {reactive,ref,getCurrentInstance,onMounted} from 'vue'
	import {onLoad,onShow} from "@dcloudio/uni-app"
	import {storeToRefs} from "pinia";//结构才需要引入
	import {useNavStore} from '@/store/index.js'//引入空间
	const navStore = useNavStore()//给空间命名
	const { statusBarHeights,top,Jnheight} = storeToRefs(navStore);//解构数据
	const {proxy} = getCurrentInstance()
  const triggered=ref(false)
	const tabList = ref(['全部订单', '退款订单', '售后记录'])
	const navobj = reactive({
		  title:'订单中心',
			image:false
	})
	const scrollobj=reactive({
		page:1,
		isloading:false,
		total:0,
		isjz:false
	})
	const orderList=ref([])
	const ticketList=ref([])
	const actIndex=ref(0)

	onMounted(()=>{
		getData()
	}) 
	const emits = defineEmits(["changes"])
	const changes = () => {
			emits("changes")
			console.log('命令已发送');
			
	} 
	
	//订单数量装填
	const orderNoticeNumfun=async()=>{
		const result = await proxy.$api.orderNoticeNum()
		if(result.code==200){
			console.log('订单数量',result.data);
			var ordernotice = result.data
			if(result.data.length>0){
				if(orderList.value.length>0){
					for(var i=0;i<orderList.value.length;i++){
						for(var j=0;j<ordernotice.value.length;j++){
							if(orderList.value[i].orderNo ==ordernotice.value[j]){
								orderList.value[i].isStatusChangedUnRead.key=1
								$forceUpdate()
							}else{
								orderList.value[i].isStatusChangedUnRead.key=0
								$forceUpdate()
							}
						}
					}
				}
			}
		}
	}
	
	// 确认订单
	const confirm=async(e)=>{
		var data = {orderNo:e.currentTarget.dataset.orderNo}
		const result = await proxy.$api.confirmOrder(data)
		if(result.code==200){
			proxy.$showToast('确认成功')
			orderList.value[e.currentTarget.dataset.index].request.serveStatus?.key==6
			$forceUpdate()
		}
	}
	const cancalOrderfuns=async(data)=>{
		const result = await proxy.$api.cancalOrder(data)
		if(result.code==200){
			console.log('取消订单',res);
			orderList.value[event.currentTarget.dataset.index].status.key=100
			orderList.value[event.currentTarget.dataset.index].status.name='已取消'
			$forceUpdate()
			proxy.$showToast('已取消')
		}
	}
	//取消订单
	const cancalOrderfun=(event)=>{
		var data = {orderNo:event.currentTarget.dataset.orderno,reason:0}
		uni.showModal({
			title: '确认取消订单',
			success: (e) => {
				console.log(e);
				if (e.confirm) {
					cancalOrderfuns(data)
				}
			}
		})
	}
	// 下拉刷新
 const pulldown=()=>{
		triggered.value=true
		scrollobj.page=1
		orderList.value = []
		getData()
	}
	
	//上拉加载
	const scrolltolower=()=>{
		console.log('111111');
		if (scrollobj.total < 10) {
			proxy.$showToast('已经全部加载完成了')
			return
		}
		if (scrollobj.isloading) return;
		scrollobj.page++;
		uni.showLoading({
			title: '加载中'
		});
		// 执行的函数↓
		getData()
	}
			
	const pay=(e)=> {
		var lookid =  e.currentTarget.dataset.lookid
		var payment = e.currentTarget.dataset.payment
		var data = {
			orderNo: payment.orderNo,
			payment: {
				payWay: 2,
			},
			paymentReq: {
				wayCode: 'WX_LITE'
			}
		}
		uni.navigateTo({
			url: `/pages-detail/pay/pay?data=${JSON.stringify(data)}&price=${payment.payAmount}&id=${payment.id}&lookid=${lookid}`
		})
	}
	const closefun=async(data)=>{
		const result = await proxy.$api.closeOrder(data)
		if(result.code==200){
			orderList.value[event.currentTarget.dataset.index].status.key=100
			orderList.value[event.currentTarget.dataset.index].status.name='已关闭'
			$forceUpdate()
			proxy.$showToast('已关闭')
		}
	}
	const close=(event)=>{
		console.log(event);
		var that = this
		 var data = {
			 orderNo:event.currentTarget.dataset.orderno
		 }
		 console.log(data,'data');
		 uni.showModal({
			title: '确认关闭订单',
			success: (e) => {
				console.log(e);
				if (e.confirm) {
					closefun()
				}
			}
		 })
	}
	const choose=(index)=> {
		actIndex.value = index
		orderList.value = []
		
		ticketList.value = []
		scrollobj.page = 1
		getData()
	}
	const toRefund=(id, no)=> {
		uni.navigateTo({
			url: `/pages/order/refund?id=${id}&orderNo=${no}`
		})
	}
	const readOrderNotice=async(data)=>{
		var data = {id:data}
		const result = await proxy.$api.readOrderNotice(data)
		if(result.code==200){
			console.log('已读',result);
			uni.setStorageSync('orderindex',-1)
		}
	}
	const toDetail=(e)=> {
		clearred(e.currentTarget.dataset.index)
		readOrderNotice(e.currentTarget.dataset.id)
		uni.setStorageSync('orderindex',e.currentTarget.dataset.index)
		uni.navigateTo({
			url: '/pages-order/detail/detail?id=' + e.currentTarget.dataset.id
		})
	}
	const clearred=(data)=>{
		console.log('执行clear');
		if(data>=0){
			console.log('111');
			console.log(orderList.value,'aaaaaaaaaaaaa');
			if(orderList.value.length>0){
				console.log('222');
				orderList.value[data].isStatusChangedUnRead.key=0
				console.log(orderList.value,'aaaaaaaaaaaaa');
				
			}
		}
	}
	const getData=async()=> {
		scrollobj.isloading = true
		if (actIndex.value != 2) {
			var data = {
				pageNum: scrollobj.page,
				pageSize: 10,
				statusParam: actIndex.value == 0 ? '' : 6
			}
			
			const result = await proxy.$api.getOrderList(data)
			if(result.code==200){
				orderList.value = orderList.value.concat(result.rows)
				console.log(orderList.value);
				uni.hideLoading()
				triggered.value=false
				scrollobj.total = result.rows.length
				scrollobj.isloading = false
			}
		
		} else {
			var data = {
				pageNum: scrollobj.page,
				pageSize: 10,
			}
			const result = await proxy.$api.ticketList(data)
			if(result.code==200){
				ticketList.value = this.ticketList.concat(res.rows)
				uni.hideLoading()
				triggered.value=false
				scrollobj.total = res.rows.length
				scrollobj.isloading = false
			}
		}
	}
	
defineExpose({
		orderNoticeNumfun,
		clearred
	})
</script>

<style lang="scss">
	page{
		overflow: hidden;
	}
	.ticketList{
		padding: 15px;
		
		.item{
			background-color: white;
			padding: 15px;
			border-radius: 10px;
			font-size: 14px;
			margin: 10px 20rpx;
			.line{
				width: 100%;
				height: 1px;
				background-color: $backGrey;
				margin: 10px 0px;
			}
			
			.headerBox{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.status{
					font-weight: bold;
					color: $red;
				}
				.title{
					font-weight: bold;
				}
			}
			
			.body{
				.timeBox{
					color: $grey;
					font-size: 12px;
					text-align: right;
				}	
				
				.imgList{
					white-space: nowrap;
					.imgBox{
						display: inline-block;
						width: 50px;
						height: 50px;
						border-radius: 5px;
						.img{
							width: 100%;
							height: 100%;
							border-radius: 5px;
						}
					}
				}
				
				.labelBox{
					display: flex;
					align-items: center;
					margin: 10px 0px;
					
					.dot{
						background-color: #FF8F1F;
						width: 5px;
						height: 5px;
						border-radius: 50%;
						margin-right: 10px;
					}
					.value{
						font-size: 12px;
					}
				}
			}
		}
	}
	
	.orderList {

		.item {
			margin: 10px 20rpx;
			background-color: white;
			border-radius: 10px;

			.buttonBox {
				display: flex;
				flex-direction: row-reverse;
				border-top: 1px solid $shollowGrey;
				padding: 10px 10px;

				.button {
					color: white;
					background: linear-gradient( 150deg, #4E8CFF 0%, #59DEF9 100%);;
					border-radius: 20px;
					padding: 5px 15px;
					font-size: 14px;
				}

				.warnButton {
					color: fff;
					background:linear-gradient( 150deg, #4E8CFF 0%, #59DEF9 100%);;
					border: 1px solid $shollowGrey;
					margin-right: 5px;
				}
			}

			.timeBox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px 20px;
				border-bottom: 1px solid $shollowGrey;

				.time {
					font-size: 14px;
					font-weight: bold;
				}

				.statu {
					font-weight: bold;
					font-size: 14px;
					color:#4E8CFF;
				}
			}

			.content {
				padding: 10px 20px;
				display: flex;
				align-items: center;

				.icon {
					width: 50rpx;
					height: 50rpx;
					color: white;
					font-weight: bold;
					background:linear-gradient( 150deg, #4E8CFF 0%, #59DEF9 100%); ;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 14px;
				}

				.end {
					background-color: #FF8F1F;
				}

				.where {
					font-size: 14px;
					margin-left: 10px;width: 530rpx;
				}
			}

			.priceBox {
				padding: 15px 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 14px;

				.timeOut {
					display: flex;
					align-items: center;
					color: #4E8CFF;

					.img {
						width: 44rpx;
						height: 44rpx;
					}

					.text {
						margin-left: 5px;
					}
				}

				.price {
					font-weight: bold;
					font-size: 18px;

					.icon {
						font-size: 14px;
					}
				}
			}
		}
	}

	.tabList {
		display: flex;
		align-items: center;

		.item {
			transition: all 0.5s;
			width: 33%;
			background-color: white;
			text-align: center;
			padding: 10px;
			color: black;
			font-weight: bold;
		}

		.actClass {
			color: #4E8CFF !important;
			font-weight: bold;
		}
	}
</style>